<div id="app">
  <h4 class="mt-sm-4 ms-sm-4 text-muted">Component Placement</h4>
  <div>
    <div v-for="placement in ['top', 'left', 'right', 'bottom']" :key="placement">
      <b-btn :id="placement" variant="primary">{{ placement }}</b-btn>
      <b-popover :target="placement" triggers="click" :placement="placement" :title="placement">
        {{ placement }}
      </b-popover>
    </div>
  </div>
  <div>
    <b-btn id="show">Show</b-btn>
    <b-popover target="show" triggers="click" show boundary="window" title="Show" content="Show Content"></b-popover>
  </div>
  <h4 class="mt-sm-4 ms-sm-4 text-muted">Directive</h4>
  <div>
    <b-btn id="directive1" v-b-popover.top.click.viewport="'content'" title="popover">Directive 1</b-btn>
  </div>
  <div>
    <b-btn id="directive2" v-b-popover.top.click.viewport="'content'">Directive 2</b-btn>
  </div>
  <div>
    <b-btn id="directive3" v-b-popover.top.click="{ title: 'title', content: 'content' }">Directive 3</b-btn>
  </div>
  <div>
    <b-btn id="directive4" v-b-popover.top.click="{ html: true, title: 'title', content: '<b>content</b>' }">Directive 4</b-btn>
  </div>
  <div>
    <b-btn id="directive5" v-b-popover.top.click="{ title: titleMethod, content: contentMethod }">Directive 5</b-btn>
  </div>
  <div>
    <b-btn id="directive6" v-b-popover.top.click.html="'<b>bold</b> content'" title="Title <b>Bold</b>">Directive 6</b-btn>
  </div>
  <div>
    <b-btn id="directive7" v-b-popover="configMethod">Directive 7</b-btn>
  </div>
</div>
